<template>
  <div class="search">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input
          v-model="form.projectName"
          placeholder="请输入项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目编号">
        <el-input
          v-model="form.projectNo"
          placeholder="请输入项目编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input
          v-model="form.keyName"
          placeholder="请输入搜索关键字"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary" icon="el-icon-search" @click="onSearch"
        >查询</el-button
      >
      <el-button type="default" icon="el-icon-refresh-left" @click="restForm"
        >重置</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        projectName: '',
        projectNo: '',
        keyName: '',
      },
    }
  },
  methods: {
    restForm() {
      this.form = ''
    },

    onSearch() {
      this.$emit('on_search', this.form)
    },
  },
}
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 200px;
}
</style>